<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Client.BlazorMauiApp</title>
    <base href="/" />
    <link href="css/materialdesignicons/css/materialdesignicons.css" rel="stylesheet" />
    <link href="css/materialdesignicons-light/css/materialdesignicons-light.css" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />
    <link href="_content/Swimj.RazorLib/app.css" rel="stylesheet" />
    <link href="_content/Admin.RazorLib/app.css" rel="stylesheet" />
    <link href="_content/DataServer.RazorLib/app.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Client.BlazorMauiApp.styles.css" rel="stylesheet" />
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">
        <style>
            #loader-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1000
            }

                #loader-wrapper .loader-section {
                    position: fixed;
                    top: 0;
                    width: 51%;
                    height: 100%;
                    background: #eceff1;
                    z-index: 1000;
                    -webkit-transform: translateX(0);
                    -ms-transform: translateX(0);
                    transform: translateX(0)
                }

                    #loader-wrapper .loader-section.section-left {
                        left: 0
                    }

                    #loader-wrapper .loader-section.section-right {
                        right: 0
                    }

            #loader {
                display: block;
                position: relative;
                left: 50%;
                top: 50%;
                width: 150px;
                height: 150px;
                margin: -75px 0 0 -75px;
                border-radius: 50%;
                border: 3px solid transparent;
                border-top-color: #3498db;
                -webkit-animation: spin 2s linear infinite;
                animation: spin 2s linear infinite;
                z-index: 1001
            }

                #loader:before {
                    content: "";
                    position: absolute;
                    top: 5px;
                    left: 5px;
                    right: 5px;
                    bottom: 5px;
                    border-radius: 50%;
                    border: 3px solid transparent;
                    border-top-color: #e74c3c;
                    -webkit-animation: spin 3s linear infinite;
                    animation: spin 3s linear infinite
                }

                #loader:after {
                    content: "";
                    position: absolute;
                    top: 15px;
                    left: 15px;
                    right: 15px;
                    bottom: 15px;
                    border-radius: 50%;
                    border: 3px solid transparent;
                    border-top-color: #f9c922;
                    -webkit-animation: spin 1.5s linear infinite;
                    animation: spin 1.5s linear infinite
                }

            @-webkit-keyframes spin {
                0% {
                    -webkit-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    transform: rotate(0deg)
                }

                100% {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    transform: rotate(360deg)
                }
            }

            @keyframes spin {
                0% {
                    -webkit-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    transform: rotate(0deg)
                }

                100% {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    transform: rotate(360deg)
                }
            }
        </style>

        <!-- Start Page Loading -->
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
        </div>
        <!-- End Page Loading -->
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_content/BlazorMonaco/jsInterop.js"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>